<template>
    <!-- 文章列表 -->
    <div class="article-list-blo">
        <div class="server_title">
            <div class="crumbs store_title">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item>文章管理</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="mainBtn">
                <el-button type="success" @click="addArticle()">
                    <i class="el-icon-plus"></i>添加文章
                </el-button>
                <!--<el-button type="info"><i class="el-icon-delete"></i>垃圾箱</el-button>-->
            </div>
        </div>
        <div class="article-content">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="title" label="标题"></el-table-column>
                <el-table-column prop="viceTitle" label="副标题" align="center"></el-table-column>
                <el-table-column prop="createdTime" label="操作时间"></el-table-column>
                <el-table-column prop="status" label="状态" align="center"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="small" type="primary" @click="editFun(scope.$index, scope.row)">修改</el-button>
                        <el-button size="small" type="danger" @click="delFun(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 添加或修改文章 -->
        <el-dialog :title="optTitle" :visible.sync="articleEditDialog" width="1000px">
            <div class="article-deit-blo">
                <el-form label-width="80px" :model="form">
                    <el-form-item label="标题">
                        <el-input v-model="form.title"></el-input>
                    </el-form-item>
                    <el-form-item label="副标题">
                        <el-input v-model="form.subTitle"></el-input>
                    </el-form-item>
                    <el-form-item label="权值">
                        <el-input v-model="form.priorty" style="width: 200px;"></el-input>
                    </el-form-item>
                    <div class="ueditor-blo">
                        <label class="label">内容</label>
                        <div class="value">
                            <script id="editor" type="text/plain"></script>
                        </div>
                    </div>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="articleEditDialog = false">取 消</el-button>
                    <el-button type="primary" @click="saveArticle()">新 增</el-button>
                </span>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    articlesList,
    addArticles,
    editArticles,
    delArticles
} from "../api/api"
import { formatDate } from "../tool/tool"
import { base64, tool_confirm } from "../tool/tool"

export default {
    data() {
        return {
            editor: null,
            optTitle: "新增",
            articleEditDialog: false,
            updateId: "",
            tableData: [],
            form: {
                title: "",
                subTitle: "",
                priorty: ""
            },
            config: {
                initialFrameWidth: null,
                initialFrameHeight: 350
            }
        }
    },
    created() {},
    computed: {},
    mounted() {
        this.getArticlesList()

        // this.editor.addListener("ready", function() {
        //     _this.editor.setContent(_this.defaultMsg) // 确保UE加载完成后，放入内容。
        // })
    },
    methods: {
        getArticlesList() {
            //获取文章列表
            articlesList({ page: 0, size: 10 }).then(res => {
                console.log(res)
                this.tableData = res.data.content.page.content
                console.log(this.tableData)
            })
        },
        /* 新增文章 */
        addArticle() {
            this.optTitle = "新增文章"
            this.articleEditDialog = true
            setTimeout(() => {
                this.editor = UE.getEditor("editor", this.config) // 初始化UE
            }, 50)
        },
        /* 修改文章 */
        editFun(row) {
            this.optTitle = "修改文章"
            this.updateId = row.id
            this.articleEditDialog = true
            setTimeout(() => {
                this.editor = UE.getEditor("editor", this.config) // 初始化UE
                this.form = {
                    title: row.title,
                    subTitle: row.viceTitle
                    // priorty: row.id
                }
                this.setUEContent(row.content)
            }, 50)
        },
        /* 保存文章 */
        saveArticle() {
            let data = {
                title: this.form.title,
                viceTitle: this.form.subTitle,
                priorty: this.form.priorty,
                articleType: "STRATEGY",
                content: this.base64_encode(this.getUEContent())
            }
            if (this.optTitle == "修改") {
                data.coverId = this.updateId
            }
            addArticles(data).then(res => {
                console.log(data)
                if (this.optTitle == "修改") {
                    this.$message.success("修改成功！")
                    this.getArticlesList()
                    this.articleEditDialog = false
                } else {
                    this.$message.success("新增成功！")
                    this.getArticlesList()
                    this.articleEditDialog = false
                }
            })
        },
        /* 删除文章 */
        delFun() {},
        /* 获取富文本的内容 */
        getUEContent() {
            return this.editor.getContent()
        },
        /* 设置富文本内容 */
        setUEContent(content) {
            this.editor.setContent(content)
        },
        base64_encode(val) {
            var str = CryptoJS.enc.Utf8.parse(val)
            var base64 = CryptoJS.enc.Base64.stringify(str)
            return base64
        },
        base64_decode(val) {
            var words = CryptoJS.enc.Base64.parse(val)
            return words.toString(CryptoJS.enc.Utf8)
        }
    },
    destroyed() {
        this.editor.destroy()
    }
}
</script>

<style>
.article-list-blo .server_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
.article-list-blo .ueditor-blo {
    /* display: flex;
    align-items: center; */
    margin-bottom: 20px;
}
.article-list-blo .ueditor-blo .value {
    position: relative;
    margin-left: 80px;
}
.article-list-blo .ueditor-blo .label {
    width: 68px;
    text-align: right;
    float: left;
}
.article-list-blo .dialog-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
</style>
